import ArticleItem from '@/component/ArticleItem'

import styles from './index.module.scss'
import { useRef, useState } from 'react'
import { InfiniteScroll, List } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { getChanenlListAPI } from '@/api/home'
import { ArticlesItem } from '@/types/data'
type Props = {
  // 频道ID
  channelId: number
}
let count = 0
// mock假数据
export async function mockRequest() {
  if (count >= 5) {
    return []
  }
  await sleep(2000)
  count++
  return [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
  ]
}
const ArticleList = ({ channelId }: Props) => {
  const timer = useRef(Date.now())
  // 1. 定义列表数据变量
  const [data, setData] = useState<ArticlesItem[]>([])
  // 2. 控制列表加载状态：true 还有数据 | false 没有数据
  const [hasMore, setHasMore] = useState(true)
  /**
   * 3. 加载数据的方法：
   *    1. 组件默认挂载会执行一次，加载一屏数据，如果不够一屏，会再次执行
   *    2. 列表滚动到底部，会再次执行
   */
  async function loadMore() {
    // 1. 发送请求，获取列表数据
    const append = await getChanenlListAPI({
      channel_id: channelId,
      timestamp: timer.current,
    })
    // 2. 向列表中追加数据
    setData((val) => [...val, ...append.data.results])
    // 3. 判断是否还有数据：
    // 有=》hasMore设置为true，可以继续滚动加载数据 |  没有=》 hasMore设置为false，不能继续滚动加载数据
    if (append.data.pre_timestamp) {
      timer.current = append.data.pre_timestamp
    } else {
      setHasMore(false)
    }
  }
  return (
    <div className={styles.root}>
      {/* 文章列表中的每一项 */}
      {data.map((item) => (
        <div className="article-item" key={item.art_id}>
          <ArticleItem type={item.cover.type} item={item} />
        </div>
      ))}

      {/* <List>
        {data.map((item, index) => (
          <List.Item key={index}>{item}</List.Item>
        ))}
      </List> */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

export default ArticleList
